import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
import React, { useEffect, useState, useRef } from "react";
import SecondaryLayout from "../../compoents/secondary-layout";
import classes from "./notifications.module.less";
import { useDispatch, useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import useServices from "../../hooks/useRequest";
import { LocalKeyMap } from "../../local";
import { debounceFn } from "../../utils";
import { getMessageList, getAnnouncementList } from "../../api/wallet";
import dayjs from "dayjs";
import useRouter from "../../hooks/useRouter";
import kingsInstance from "../../instance";
import { EVENT, KEYCONST } from "../../enums";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
var tabNavs = [
    "Notifications",
    "Announcements"
];
function Notifications() {
    var _useRouter = useRouter(), query = _useRouter.location.query;
    var theme = useSelector(function(st) {
        return {
            theme: st.app.theme
        };
    }).theme;
    var t = useTranslation().t;
    var _query_tabIndex;
    var _useState = _sliced_to_array(useState((_query_tabIndex = query === null || query === void 0 ? void 0 : query.tabIndex) !== null && _query_tabIndex !== void 0 ? _query_tabIndex : 0), 2), navIndex = _useState[0], setNavIndex = _useState[1];
    var dispatch = useDispatch();
    var notice = useSelector(function(state) {
        return {
            notice: state.app.notice
        };
    }).notice;
    var _useState1 = _sliced_to_array(useState({
        data: [],
        loading: false,
        page: 1,
        dataMore: true
    }), 2), listData = _useState1[0], setListData = _useState1[1];
    var containerRef = useRef(null);
    // const page = useRef(0)
    var services = useServices({
        getMessageList: getMessageList,
        getAnnouncementList: getAnnouncementList
    });
    var fetchData = function() {
        var _ref = _async_to_generator(function() {
            var response, _tmp, responseData;
            return _ts_generator(this, function(_state) {
                switch(_state.label){
                    case 0:
                        setListData(function(prevData) {
                            return _object_spread_props(_object_spread({}, prevData), {
                                loading: true
                            });
                        });
                        if (!(navIndex === 0)) return [
                            3,
                            2
                        ];
                        return [
                            4,
                            services.getMessageList({
                                pageNum: listData.page,
                                pageSize: 10
                            })
                        ];
                    case 1:
                        _tmp = _state.sent();
                        return [
                            3,
                            4
                        ];
                    case 2:
                        return [
                            4,
                            services.getAnnouncementList({
                                pageNum: listData.page,
                                pageSize: 10
                            })
                        ];
                    case 3:
                        _tmp = _state.sent();
                        _state.label = 4;
                    case 4:
                        response = _tmp;
                        responseData = response === null || response === void 0 ? void 0 : response.data;
                        setListData(function(prevData) {
                            return _object_spread_props(_object_spread({}, prevData), {
                                data: _to_consumable_array(prevData.data).concat(_to_consumable_array(responseData === null || responseData === void 0 ? void 0 : responseData.list)),
                                loading: false,
                                dataMore: !(responseData === null || responseData === void 0 ? void 0 : responseData.isLastPage)
                            });
                        });
                        return [
                            2
                        ];
                }
            });
        });
        return function fetchData() {
            return _ref.apply(this, arguments);
        };
    }();
    var getAnnouncementNum = function() {
        return notice.totalAnnouncementCount - notice.readAnnouncementCount;
    };
    var handleScroll = debounceFn(function() {
        var container = containerRef.current;
        if (container.clientHeight === container.scrollHeight || container.scrollTop === 0) return;
        if (container.scrollTop + container.clientHeight >= container.scrollHeight - 20 && !listData.loading) {
            setListData(function(prevData) {
                return _object_spread_props(_object_spread({}, prevData), {
                    page: prevData.page + 1
                });
            });
        }
    });
    var changeNav = function(index) {
        setNavIndex(index);
        setListData(function(prevData) {
            return _object_spread_props(_object_spread({}, prevData), {
                data: [],
                page: 1,
                dataMore: true
            });
        });
        readNotice(index);
    };
    var gotoNoticeDetail = function(type, item) {
        // 跳转记录详情
        if (type === "transfer") {
            if (item.name) {
                dispatch.app.PUSH({
                    path: "/nftsHistory",
                    query: {
                        tokenId: item.tokenId,
                        from: "goDetail",
                        detailId: item.id
                    }
                });
            } else if (item.to) {
                // 跳转token转账详情
                dispatch.app.PUSH({
                    path: "/txn",
                    query: {
                        activeCoin: _object_spread({}, item),
                        from: "goDetail",
                        detailId: item.id
                    }
                });
            }
        } else {
            if (!item.name) return;
            // 跳转nft详情
            dispatch.app.PUSH({
                path: "/nftDetails",
                query: {
                    tokenId: item.tokenId,
                    type: item.type || "nft",
                    chainType: item.chainType,
                    contract: item.contract
                }
            });
        }
    };
    var readNotice = function(index) {
        var resultObj = {
            readMessageCount: notice.readMessageCount,
            readAnnouncementCount: notice.readAnnouncementCount
        };
        if (index === 0) {
            resultObj.readMessageCount = notice.totalMessageCount;
        } else {
            resultObj.readAnnouncementCount = notice.totalAnnouncementCount;
        }
        var newNotice = _object_spread({}, notice, resultObj);
        localStorage.setItem(KEYCONST.notice, JSON.stringify(newNotice));
        dispatch.app.SET_NOTICE(newNotice);
        kingsInstance.emit(EVENT.notice, newNotice);
    };
    useEffect(function() {
        if (!listData.dataMore) return;
        fetchData();
    }, [
        listData.page,
        navIndex,
        listData.dataMore
    ]);
    useEffect(function() {
        containerRef.current.addEventListener("scroll", handleScroll);
        readNotice(query.tabIndex);
    }, []);
    return /*#__PURE__*/ _jsx(_Fragment, {
        children: /*#__PURE__*/ _jsx(SecondaryLayout, {
            title: t(LocalKeyMap.notifications),
            className: classes.notifications,
            children: /*#__PURE__*/ _jsxs("div", {
                className: classes.wrap,
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: classes.menu,
                        children: tabNavs.map(function(item, index) {
                            return /*#__PURE__*/ _jsxs("div", {
                                className: "".concat(classes.menuItem, " ").concat(navIndex === index ? classes.active : ""),
                                onClick: function() {
                                    changeNav(index);
                                },
                                children: [
                                    item,
                                    navIndex === 0 && index === 1 && getAnnouncementNum() > 0 && /*#__PURE__*/ _jsx("div", {
                                        className: classes.dot
                                    })
                                ]
                            });
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        children: /*#__PURE__*/ _jsxs("div", {
                            ref: containerRef,
                            className: classes.list,
                            children: [
                                navIndex === 0 && listData.data.map(function(item, key) {
                                    var businessParams = JSON.parse(item.businessParams || "{}");
                                    return /*#__PURE__*/ _jsxs("div", {
                                        className: classes.listItem,
                                        onClick: function() {
                                            gotoNoticeDetail(item.messageType, businessParams);
                                        },
                                        children: [
                                            /*#__PURE__*/ _jsxs("div", {
                                                className: classes.hd,
                                                children: [
                                                    item.titlePrefix && /*#__PURE__*/ _jsx("span", {
                                                        className: "".concat(classes.titlePrefix, " ").concat((item.titlePrefixStyle || "").toLowerCase() === "expired" ? classes.expired : ""),
                                                        children: item.titlePrefix
                                                    }),
                                                    item.title
                                                ]
                                            }),
                                            /*#__PURE__*/ _jsx("div", {
                                                className: classes.content,
                                                children: item.content
                                            }),
                                            /*#__PURE__*/ _jsxs("div", {
                                                className: classes.meta,
                                                children: [
                                                    /*#__PURE__*/ _jsx("div", {
                                                        className: classes.date,
                                                        children: dayjs(item.createdTime).format("D MMM YYYY, HH:mm")
                                                    }),
                                                    item.messageType === "nft" && /*#__PURE__*/ _jsx("div", {
                                                        className: classes.info,
                                                        children: businessParams.name
                                                    })
                                                ]
                                            })
                                        ]
                                    }, "message-".concat(key));
                                }),
                                navIndex === 1 && listData.data.map(function(item, key) {
                                    return /*#__PURE__*/ _jsxs("div", {
                                        className: classes.detailItem,
                                        children: [
                                            /*#__PURE__*/ _jsx("div", {
                                                className: classes.date,
                                                children: dayjs(item.createdTime).format("D MMM YYYY, HH:mm")
                                            }),
                                            /*#__PURE__*/ _jsxs("div", {
                                                className: classes.box,
                                                children: [
                                                    /*#__PURE__*/ _jsx("div", {
                                                        className: classes.hd,
                                                        children: item.title
                                                    }),
                                                    /*#__PURE__*/ _jsx("div", {
                                                        className: classes.content,
                                                        children: item.content
                                                    })
                                                ]
                                            })
                                        ]
                                    }, "announcements-".concat(key));
                                }),
                                !listData.dataMore && /*#__PURE__*/ _jsx("p", {
                                    className: classes.noData,
                                    children: "No more data"
                                })
                            ]
                        })
                    })
                ]
            })
        })
    });
}
export default Notifications;

 //# sourceMappingURL=index.js.map